/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-10-24 14:37:50
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-27 13:45:30
 * @FilePath: \宏烨找房\user\demo\src\page\housingDetail\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { ArrowLeft, Star } from '@react-vant/icons';
import { Image ,ActionBar, } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { httpHousingDetail,  } from '../../api/housing'
import { getDate } from '../../getTime/index.jsx'
import './index.css'

const HousingDetail = () => {
    
    let BMapGL = window.BMapGL;//地图
    const navigate=useNavigate();
    const params = useParams()//获取详情数据
    const [housing, setHousing] = useState([])//详情
    const [housings, setHousings] = useState([])//所有数据

    useEffect(() => {
        getData();
        getHousing()

        // 创建地图实例
        var map = new window.BMapGL.Map("container");          // 创建地图实例 
        var point = new window.BMapGL.Point(116.404, 39.915);  // 创建点坐标 
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放

        function myFun(result) {
            var cityName = result.name;
            map.setCenter(cityName);
            // alert("当前定位城市:" + cityName);
            // console.log(cityName)
        }
        var myCity = new window.BMapGL.LocalCity();
        myCity.get(myFun);
    }, [])
    // 详情数据
    const getData = async () => {
        const res = await httpHousingDetail('/housingDetail', { id: params.id });
        setHousing(res.data.list)
    }
    // 推荐数据
    const getHousing =async () => {
        const res = await httpHousingDetail('/housing');
        setHousings(res.data.results)
    }
    // 返回上一级
    const back = () => {
        window.history.back()
    }
    return (
        <div className='detail'>
            <div className="top">
                <div className="back" onClick={() => { back() }}>
                    <ArrowLeft />
                </div>
                <span>详情</span>
            </div>
            <div className="content">
                <Image width='100vw' height='300' fit='cover' src={housing.img} />
                <p style={{ fontSize: '25px', padding: '10px' }}>{housing.name}  {housing.address}</p>
                <p style={{ fontSize: '15px', color: 'orange', padding: '10px' }}>
                    {housing.price * housing.area}万 {housing.area}/m <sup>2</sup>
                </p>
                <h2 style={{ padding: '10px' }}>房源信息</h2>
                <div className="housingInformation">
                    <div className='housing-item'>
                        <p style={{ color: '#AEAEAE' }}>单价</p>
                        <p style={{ fontSize: '15px' }}>{housing.price}元/m <sup>2</sup> </p>
                    </div>
                    <div className='housing-item'>
                        <p style={{ color: '#AEAEAE' }}>朝向</p>
                        <p style={{ fontSize: '15px' }}>{housing.direction} </p>
                    </div>
                    <div className='housing-item'>
                        <p style={{ color: '#AEAEAE' }}>装修</p>
                        <p style={{ fontSize: '15px' }}> 精装修</p>
                    </div>
                    <div className='housing-item'>
                        <p style={{ color: '#AEAEAE' }}>楼层</p>
                        <p style={{ fontSize: '15px' }}>高层/共18层 </p>
                    </div>
                    <div className='housing-item'>
                        <p style={{ color: '#AEAEAE' }}>类型</p>
                        <p style={{ fontSize: '15px' }}>高层住宅 </p>
                    </div>
                    <div className='housing-item'>
                        <p style={{ color: '#AEAEAE' }}>更新</p>
                        <p style={{ fontSize: '5px' }}>{getDate(housing.updateTime) }</p> 
                    </div>
                </div>

                {/* 周边 */}
                <h2 style={{ marginTop: '40px', padding: '10px' }}>位置及周边</h2>
                <div className='myMap' style={{}}>
                    <div id="container" style={{ height: "150px", width: '95%', margin: 'auto' }}></div>
                </div>
                {/* 房源特色 */}
                <h2 style={{ marginTop: '50px', padding: '10px' }}>房源特色</h2>
                <div className='features'>
                    <p>
                        <li></li> <span style={{ fontWeight: 'bolder' }}>核心卖点</span>
                    </p>
                    <span>原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用 各处各税</span>

                    <p>
                        <li></li> <span style={{ fontWeight: 'bolder' }}>业主心态</span>
                    </p>
                    <span>原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用 各处各税</span>

                    <p>
                        <li></li> <span style={{ fontWeight: 'bolder' }}>服务介绍</span>
                    </p>
                    <p>我从事房产工作已有多年，经验丰富</p>
                    <p>1:能够精准的根据每一位客户的详细需求匹配到性价比合适的</p>
                    <p>2:和业主议价是我的强项,让每位客户真正的省钱</p>
                    <p>3:我们的服务能让您物超所值</p>
                    <p>4:您的买房安家之旅,让您更加安心放心省心</p>
                </div>
                {/* 推荐房源 */}
                <h2 style={{ padding: '10px' }}>房源特色</h2>
                <div>
                    {
                        housings && housings.map((item, index) => {
                            return (
                                <dl className='housingDl' key={index}>
                                    <dt>
                                        <img src={item.img} alt="" style={{ width: '130px', height: '80px' }} />
                                    </dt>
                                    <dd>
                                        <b style={{ padding: '10px' }}>{item.name}  </b> <br />
                                        <p style={{ padding: '10px' }}>{item.address}</p>
                                        <b style={{ color: 'orange', padding: '10px' }}>{item.price}万</b>
                                    </dd>
                                </dl>
                            )
                        })
                    }
                </div>

            </div>

            <div className="footer">
                <div className='agents'>
                    <ActionBar>
                        <ActionBar.Icon
                            icon={<img src={housing.img} alt="" style={{ width: '30px', height: '30px', borderRadius :'50%'}}/>}
                            text={housing.manager}
                            onClick={() => console.log('shop click')}
                        />
                        <ActionBar.Icon
                            icon={<Star color='red' style={{ width: '30px', height: '30px', borderRadius: '50%' }} />}
                            text='店铺'
                            onClick={() => console.log('shop click')}
                        />
                        <ActionBar.Button type='warning' text='在线咨询' onClick={()=>{navigate('/service')}}/>
                        <ActionBar.Button type='danger' text='电话咨询' />
                    </ActionBar>
                </div>

                <div className='btns'>
                    1
                </div>
            </div>
        </div>
    )
}
export default HousingDetail;